import { useState, useMemo } from 'react'
import { Card, Grid, } from 'antd-mobile'
import { DownCircleOutline, UpCircleOutline } from 'antd-mobile-icons'
import classes from '../index.module.css'
import UseForCard from '../UI/UseForCard'
import _ from 'lodash'
const DayBill = ({ date, billsList }) => {

	const [showDetail, setShowDetail] = useState(false)
	const onHeaderClick = () => {
		setShowDetail(!showDetail)
	}

	const dayResult = useMemo(() => {
		const pay = billsList.filter(item => item.type === 'pay').reduce((acc, cur) => acc + cur.money, 0)
		const income = billsList.filter(item => item.type === 'income').reduce((acc, cur) => acc + cur.money, 0)
		return {
			pay,
			income,
			total: (income - pay).toFixed(2)
		}
	}, [billsList])


	const useForGroup = useMemo(() => {
		const groupData = _.groupBy(billsList, item => item.useFor)
		const keys = Object.keys(groupData)
		return {
			groupData,
			keys
		}
	}, [billsList])

	return (
		<Card
			title={date}
			extra={showDetail ? <UpCircleOutline /> : <DownCircleOutline />}
			onHeaderClick={onHeaderClick}
			className={classes.dayBillCard}
			style={{ marginTop: '10px' }}
		>
			<Grid columns={3}>
				<Grid.Item>
					<span style={{ color: 'red', paddingRight: '5px' }}>pay</span>
					<span>{dayResult.pay}</span>
				</Grid.Item>
				<Grid.Item>
					<span style={{ color: 'green', paddingRight: '5px' }}>income</span>
					<span>{dayResult.income}</span>
				</Grid.Item>
				<Grid.Item style={{ textAlign: 'right' }}>
					<span style={{ fontSize: '1rem', paddingRight: '5px' }}>{dayResult.total}</span>
					<span>balances</span>
				</Grid.Item>
			</Grid>

			{showDetail &&
				useForGroup.keys.map(key => <UseForCard type={key} billsList={useForGroup.groupData[key]} key={key} />)
			}
		</Card >
	)
}

export default DayBill